<template>
    <div>
        <r-search :searchHandle="searchHandleAdd" />
        <r-search :searchForm="searchForm" :searchHandle="searchHandle" :searchData="searchData" />
        <r-table :isSelection="true" :isPagination="true" :tableData="tableData" :tableCols="tableCols" :tablePage="tablePage" @refresh="init()"></r-table>
        <r-form :formRules="formRules" :formHandle="formHandle" :formData="formData" :formCols="formCols" ref="elForm" labelWidth="200px" dialogWidth="1000px" :isHandle="true" />
    </div>
</template>
<script>
export default {
    data() {
        var checkpass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'));
            } else if (value !== this.formDataEditPsw.password) {
                callback(new Error('两次输入密码不一致!'));
            } else {
                callback();
            }
        };
        return {
            searchData: {
                goodsNo: '',
                goodsName: ''
            },
            searchForm: [
                {
                    type: 'input',
                    prop: 'goodsNo',
                    placeholder: '商品编号',
                    width: 170
                },
                {
                    type: 'input',
                    prop: 'goodsName',
                    placeholder: '商品名称',
                    width: 170
                },
            ],
            searchHandleAdd: [
                {
                    label: "新增商品",
                    type: "success",
                    icon: "el-icon-circle-plus-outline",
                    handle: e => this.elFormVisible()
                },
            ],
            searchHandle: [
                {
                    label: '搜索',
                    type: 'success',
                    icon: 'el-icon-search',
                    handle: e => this.init()
                },
                {
                    label: '重置',
                    icon: 'el-icon-refresh-right',
                    handle: e => this.searchFromReset()
                }
            ],
            tableData: [
            ],
            tableCols: [
                {
                    label: '商品编号',
                    prop: 'goodsNo',
                },
                {
                    label: '商品名称',
                    prop: 'goodsName',
                    // theme: e => e.status ? 'primary' : 'danger', type: "tag",
                },
                {
                    label: '商品图片',
                    prop: 'img',
                    type: 'image'
                },
                {
                    label: '折扣情况',
                    prop: 'discountInfo',
                    width: 215,
                    formatter: e => (e.discountInfo && (JSON.parse(e.discountInfo).map(item => {
                        return item.startTime + '至' + item.endTime + '____' + item.discount + '折\r'
                    })).join(',')) || '暂无'

                },
                {
                    label: '创建时间',
                    prop: 'ctime',
                    width: 200,
                },
                {
                    label: "操作",
                    type: "button",
                    width: 250,
                    btnList: [
                        {
                            label: '编辑',
                            type: 'primary',
                            size: 'mini',
                            // isShow: e => e.orderId == '123' ? true : false,
                            handle: (row) => this.elFormDetail(row)
                        },
                        {
                            label: '删除',
                            type: 'primary',
                            size: 'mini',
                            handle: (row) => this.TableDel('/activeGoodsDel', { id: row.id }, 'del')
                        },
                        {
                            label: '折扣管理',
                            type: 'primary',
                            size: 'mini',
                            handle: (row) => this.$router.push({ path: '/discount-goodsDiscount', query: { id: row.id, activeId: this.$route.query.id } })
                        },
                    ]
                },

            ],
            tablePage: { limit: 10, page: 1, total: 0 },
            formData: {
                activeName: "",
                // startDate: "",
                // endDate: "",
                // status: ""
            },
            formCols: [
                { type: "select", label: "商品名称", placeholder: '请选择商品', width: 350, prop: "goods", options: [] },
                // { type: "dateTime", label: "商品周期开始时间", placeholder: '请选择开始时间', width: 350, prop: "startTime", },
                // { type: "dateTime", label: "商品周期结束时间", placeholder: '请选择结束时间', width: 350, prop: "endTime", },
                // { type: "input", label: "折扣", placeholder: '请输入商品名称', width: 350, prop: "discount", },
                // { type: "select", label: "状态", placeholder: '请选择状态', width: 350, prop: "status",options:[{label:'启用',value:1},{label:'禁用',value:2}] },
            ],
            formRules: {
                activeGoodsId: [{ required: true, message: '请输入商品名称', trigger: 'blur' },],
                // startTime: [{ required: true, message: '请选择开始时间', trigger: 'blur' },],
                // endTime: [{ required: true, message: '请选择结束时间', trigger: 'blur' },],
                // discount: [{ required: true, message: '请输入商品名称', trigger: 'blur' }],
            },
            formHandle: [
                {
                    label: "取消",
                    handle: e => this.elFormVisible(),
                },
                {
                    label: "确定",
                    type: "success",
                    handle: e => this.elFormSubmit(),
                },

            ],

        };
    },
    components: {},
    computed: {},
    mounted() {
        this.init()
    },
    methods: {
        async init() {
            this.tablePage.offset = this.tablePage.page
            let param = { ...this.searchData, ...this.tablePage, activeId: this.$route.query.id }
            // console.log(param);
            let res = await this.api.activegoods(param)
            if (res) {
                this.tablePage.total = res.data.total
                this.tableData = res.data.list
            }
            this.formCols[0].options = []
            let resgoods = await this.api.getGoodsList({})
            if (resgoods) {
                for (let i = 0; i < resgoods.data.length; i++) {
                    this.formCols[0].options.push({
                        label: resgoods.data[i].goodsNo + resgoods.data[i].goodsName,
                        value: JSON.stringify(resgoods.data[i])
                    })
                }
            }
        },
        async elFormSubmit() {
            this.formData.account = this.formData.phone
            if (this.formData.id) {
                let obj = JSON.parse(this.formData.goods)
                let res = await this.api.activegoodsupdate({
                    id:this.formData.id,
                    goodsNo: obj.goodsNo,
                    goodsName: obj.goodsName,
                    img: obj.img,
                    activeId: this.$route.query.id * 1
                })
                if (res) {
                    this.formData.id = ''
                    this.elFormVisible()
                    this.init()
                }
            } else {
                let obj = JSON.parse(this.formData.goods)
                let res = await this.api.activegoodsadd({
                    goodsNo: obj.goodsNo,
                    goodsName: obj.goodsName,
                    img: obj.img,
                    activeId: this.$route.query.id * 1
                })
                if (res) {
                    this.elFormVisible()
                    this.init()
                }
            }

        },
        elFormDetail(row) {
            Object.keys(this.formData).forEach(key => {
                this.formData[key] = row[key]
            })
            this.formData.id = row.id;
            this.elFormVisible()
        },

    }
};
</script>
<style scoped lang='scss'>
.el-icon-search {
  margin-right: 10px;
}
.Tip {
  margin-left: 20px;
}
</style>
